<template>
  <view class="tool-container">
    <!-- 选择 -->
    <view class="btn-content">
      <view class="reset">
        <u-button
          class="btn"
          type="primary"
          hover-class="none"
          :custom-style="{
            backgroundColor: 'transparent',
            color: '#666'
          }"
          shape="circle"
          size="mini"
          @click="handleReset">重选</u-button>
      </view>
      <view class="comfirm-btn">
        <u-button
          class="btn"
          type="primary"
          hover-class="none"
          :custom-style="{
            backgroundColor: '#56d39d'
          }"
          shape="circle"
          size="mini"
          :disabled="selectNum === 0"
          @click="sumbit">确认添加({{ selectNum }})</u-button>
      </view>
    </view>
    <!-- 选择玩法 -->
    <view class="tool-content">
      <ToolList
        :artworks-list="toolListData"
        :is-batch="true"
        @handleCheckBox="handleCheckBox"/>
    </view>
  </view>
</template>

<script>
  import ToolList from '@/components/artworksList/toolList.vue'; // 工具玩法
  import {
    toolListByUserId,
    batchCreateTool
  } from '@/api/artworks';
  export default {
    components: {
      ToolList
    },
    data() {
      return {
        selectNum: 0,
        author_id: '',
        toolListData: []
      }
    },
    onLoad(options) {
      if (options && options.author_id) {
        this.author_id = options.author_id;
        this.getToolListByUserId();
      }
    },
    methods: {
      // 获取玩法列表
      getToolListByUserId() {
        toolListByUserId({
          author_id: this.author_id
        }).then(result => {
          if (result && result.data && result.data.length > 0) {
            let list = result.data;
            list.forEach(item => {
              item.checked = false;
            })
            this.toolListData = list;
          } else {
            this.toolListData = [];
          }
        })
      },

      // 点击玩法
      handleCheckBox(val) {
        this.toolListData[val].checked = !this.toolListData[val].checked;
        const selectList = this.toolListData.filter(item => item.checked);
        this.selectNum = selectList.length;
      },

      // 确定
      sumbit() {
        const toolData = this.toolListData.filter(item => item.checked);
        batchCreateTool({
          toolData,
          author_id: this.author_id,
          type: 9
        }).then(result => {
          if (result && result.data && result.data.length > 0) {
            uni.showModal({
              title: '温馨提示',
              content: `工具玩法已添加到您的主页，请前往小程序端体验玩法功能`,
              confirmText: '我知道了',
              cancelText: '继续添加',
              showCancel: true,
              confirmColor: '#56d39d',
              success: ({ confirm, cancel }) => {
                if (confirm) {
                  let pages = getCurrentPages();
                  let pagesLength = pages.length;

                  if (pagesLength > 1) {
                    uni.navigateBack({
                      delta: 1,
                    })
                  } else {
                    uni.switchTab({ url: '/pages/creativeCenter/index' });
                  }
                }
                if (cancel) {
                  this.getToolListByUserId();
                }
              }
            })
          }
        })
      },

      // 重置
      handleReset() {
        const selectList = this.toolListData.forEach(item => {
          item.checked = false;
        });
        this.selectNum = 0;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tool-container{
    padding: 24rpx;
  }

  .btn-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 4rpx solid #eaeaea;
    padding-bottom: 24rpx;

    .reset{
      color: #666;
    }

    .comfirm-btn{
      // background-color: $uni-color-primary;
      // height: 60rpx;
      // border-radius: 30rpx;
      // text-align: center;
      // line-height: 60rpx;
      // color: #fff;
      // padding: 0 24rpx;
    }
  }

  .tool-content{
    padding-top: 24rpx;
  }
</style>
